<template>
    <div class="goods" v-if="msg">
        <div class="check">
            <input type="checkbox" v-model="check" @change="change">
        </div>
        <div class="goodsImage">
            <img src="../../../assets/images/4.jpg" alt="" class="goodsPhoto">
        </div>
        <div class="intro">
            <div class="name">{{ msg.name }}</div>
            <div class="price">￥{{ msg.price*msg.sum }}</div>
        </div>
        <div class="button">
            <div class="minus_button" v-if="isShow">
                <MinusButton @click="minus"/>
            </div>
            <div v-show="isShow" class="num">
                <input type="text" v-model="msg.sum">
            </div>
            <div class="add_button">
                <AddButton @click="add"/>
            </div>
        </div>
    </div>
  </template>
  
<script>
import{computed} from 'vue'
import AddButton from './AddButton.vue';
import MinusButton from './MinusButton.vue';
import { useStore } from 'vuex';
export default {
    name:'MarketGoods',
    components:{AddButton,MinusButton},
    props:['msg'],
    setup(props){
        const msg = props.msg
        let check = computed({
            get(){
                return msg.select
            },
            set(value){
                check = value
            }
        })
        const store = useStore()
        //选择或不选当前商品
        function change(){
            const index = store.state.msg.indexOf(msg)
            if(check){
                store.state.msg[index].select=true
            }
            else {
                store.state.msg[index].select=false
            }    
        }

        //没物品只显示加号，不显示数字和减号
        let isShow = computed(()=>{
            if(msg.sum>0){
                return true
            }
            else{
                return false
            }
        })
        //按钮加
        function add(){
            msg.sum++
            store.commit('ADD')
        }
        //按钮减
        function minus(){
            if(msg.sum>0){
                msg.sum--
                store.commit('MINUS')
            }
            if(msg.sum==0){
                store.commit('POP_ITEM',msg)
            }
        }
        return {
            isShow,
            msg,
            check,
            add,
            minus,
            change
        }
    }
}
</script>
  
  <style scoped>
      .goods {
          height: 120px;
          width: 45%;
          margin-left: 17px;
          display: flex;
          position: relative;
          background-color: rgb(237, 224, 224);
          border-radius: 5px;
      }
      .goodsImage {
          width: 30%;
          margin: 10px;
      }
      .goodsPhoto {
          height: auto;
          width: 100%;
          border: 3px solid white;
      }
      .intro {
          margin: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
      }
      .add_button {
          position: absolute;
          bottom: 15px;
          right: 10px;
      }
      .minus_button {
          position: absolute;
          bottom: 15px;
          right: 70px;
      }
      .num input {
          position: absolute;
          bottom: 15px;
          right: 43px;
          border: none;
          width: 10px;
          background-color: transparent;
      }
      .check {
        position: relative;
        top:45%;
      }
  </style>